<template>
  <div class="app-container">
    <BasicList :listName="state.listName" :className="state.className" :mainKeyName="state.mainKeyName"
      :listId="state.listId" :total="state.total" :loading="state.loading" :tableData="state.tableData"
      @handleQuery="handleQuery" @onOpenEditModule="onOpenEditModule" @onOpenAddModule="onOpenAddModule">
      <template v-slot:listBtn="slotProps">
        <el-tooltip class="box-item" effect="dark" content="详情" placement="top-start">
          <el-button type="info" size="small" circle v-auth="`${state.className}:detail`"
            @click="onTableRowDetail(slotProps)">
            <SvgIcon :size="12" name="elementMemo" />
          </el-button>
        </el-tooltip>
      </template>
    </BasicList>
    <EditModule @handleQuery="handleQuery" ref="editModuleRef" :query='state.query' :bindPage="state.pageId"
      :listId="state.listId" />
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  getCurrentInstance,
  onUnmounted,
} from "vue";
import { useRoute } from 'vue-router';
import { get, } from "@/api/public/basic";
import BasicList from "@/components/basicList/index.vue";
import EditModule from "./component/editModule.vue";
import { gatherId } from '@/utils/dataGather'

const { proxy } = getCurrentInstance() as any;
const editModuleRef = ref();
const route = useRoute();

// 通过 hQEUTYEmAiw 取数据

const state = reactive({
  // 遮罩层
  loading: true,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 弹出层标题
  title: "",
  // 表格数据
  tableData: [],
  // 总条数
  total: 0,
  // url参数, 测试客户管理表
  pageId: '',
  listId: '',
  listName: '',
  className: '',
  mainKeyName: '',
  query: {}
});

/** 查询列表 */
const handleQuery = (params: any) => {
  state.query = params
  state.loading = true;
  // 如果state.queryParams中有空值，则删除
  Object.keys(params).forEach((key) => {
    if (!params[key]) {
      delete params[key];
    }
  });
  get(params, state.listId).then((response: any) => {
    state.tableData = response.data.result;
    state.total = response.data.total;
    state.loading = false;
  });
};

// 打开新增弹窗
const onOpenAddModule = () => {
  editModuleRef.value.openDialog(0);
};
// 打开编辑弹窗
const onOpenEditModule = (row: any) => {
  editModuleRef.value.openDialog(1, row[state.mainKeyName]);
};

// 打开详情
const onTableRowDetail = (scope: any) => {
  editModuleRef.value.openDialog(2, scope.row[state.mainKeyName]);
}

// 获取页面配置信息
const getPageConfig = () => {
  state.loading = true;
  get(state.listId, gatherId.DM_TABLE_LIST_ID).then((response) => {
    if (response.code == 200) {
      const { listTittle, searchKey, className, } = (response.data && response.data[0]) || {}
      // state.listId = listId
      state.listName = listTittle
      state.className = className
      state.mainKeyName = searchKey
      state.loading = false;
    }
  });
}

function decodeHexString(hexString) {
  let str = '';
  for (let i = 0; i < hexString.length; i += 2) {
    const hexChar = hexString.substr(i, 2);
    const charCode = parseInt(hexChar, 16);
    str += String.fromCharCode(charCode);
  }
  return str;
}


// 页面加载时
onMounted(() => {
  // 获取路由参数
  console.log()
  let patchArr = route.path.split('/')
  let str = patchArr[patchArr.length - 1]
  patchArr = decodeHexString(str).split(':')
  state.listId = patchArr[0]
  state.pageId = patchArr[1]
  getPageConfig()
});
// 页面卸载时
onUnmounted(() => {
  proxy.mittBus.off("onEditPartnerModule");
});
</script>
